<template>
  <div class="login">
    <van-cell-group class="box" inset>
      <div>北航食堂菜品推荐系统登录页面</div>
      <van-field v-model="user_info.user_id" label="用户id" required/>
      <van-field v-model="user_info.password" type="password" label="密码" required/>
      <van-button type="primary" @click="login">登录</van-button>
      <van-button type="primary" @click="regis">注册</van-button>
      <van-button type="primary" @click="enterWithoutInfo">以游客模式进入</van-button>
    </van-cell-group>
  </div>
</template>

<script lang="ts">
import {generatePost} from "@/utils/protocal";

export default {
  name: 'Login',
  mounted() {
    if (this.isLogin != undefined && this.isLogin != '') {
      this.$router.push("/home");
    }
  },
  data() {
    return {
      user_info: {
        user_id: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      generatePost("/user/login", this.user_info).then(res => {
        if (res.data.code == 0) {
          this.$cookies.set("user_id", this.user_info.user_id);
          this.$router.push('/home');
        } else if (res.data.code == 1) {
          alert("用户名不存在，请检查输入是否正确")
        } else {
          alert("密码输入错误，请重新检查")
        }
      }, err => {
        alert("请求后端数据失败")
      })
    },
    regis() {
      this.$router.push("/regis");
    },
    enterWithoutInfo() {
      this.$cookies.set("user_id", "");
      this.$router.push("/home");
    }
  },
  computed: {
    isLogin() {
      this.user_info.user_id = this.$cookies.get("user_id");
      return this.user_info.user_id
    }
  }
}
</script>
<style scoped>
.box {
  text-align: center;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 0px 0px 7px #cdcdcd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f9;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("/hengping.jpg");
}

@media only screen and (orientation: portrait) {

  .login {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url("/shuping.jpg");
  }

}
</style>